<template>
  <div class="reputationValue">
    <div class="one">
      <p class="p">什么是信誉值?</p>
      <span class="span"
        >信誉值，是评判主播在心动30秒的活跃度、魅力值、受欢迎程度及与个人宝石收益关联的数值，信誉值越高，收益越高。</span
      >
    </div>

    <div class="two">
      <p class="p">信誉值的用处?</p>
      <span class="span"
        >信誉值越高，智能匹配优质心动男生频次越高。发布预约功能，信誉值越高，通话可选择的宝石梯度越高，即收益也会越高。</span
      >

      <div class="tableBox">
        <table class="table_default1">
          <tr>
            <!-- <th>序号</th> -->
            <th v-for="(th, index) in tableTh" :key="index">
              {{ th.title }}
            </th>
          </tr>
          <tr v-for="(tr, index) in dataList" :key="index">
            <td class="td">
              {{ tr.name }}
            </td>
            <td class="td1">
              {{ tr.num }}
            </td>
            <td class="td1">
              {{ tr.gemstone }}
            </td>
          </tr>
          <tr>
            <td class="tdCenter" rowspan="5">
              <span>0~1000</span>
            </td>
            <td class="td1">6</td>
            <td class="td1">1500</td>
          </tr>
          <tr>
            <td class="td1">30</td>
            <td class="td1">7500</td>
          </tr>
          <tr>
            <td class="td1">120</td>
            <td class="td1">30000</td>
          </tr>
          <tr>
            <td class="td1">600</td>
            <td class="td1">150000</td>
          </tr>
          <tr>
            <td class="td1">1200</td>
            <td class="td1">300000</td>
          </tr>

          <tr>
            <td class="tdCenterB" rowspan="4">
              <span>1000~5000</span>
            </td>
            <td class="td1">30</td>
            <td class="td1">6000</td>
          </tr>
          <tr>
            <td class="td1">120</td>
            <td class="td1">24000</td>
          </tr>
          <tr>
            <td class="td1">600</td>
            <td class="td1">120000</td>
          </tr>
          <tr>
            <td class="td1">1200</td>
            <td class="td1">240000</td>
          </tr>

          <tr>
            <td class="tdCenterC" rowspan="3">
              <span>5000+</span>
            </td>
            <td class="td1">120</td>
            <td class="td1">20000</td>
          </tr>
          <tr>
            <td class="td1">600</td>
            <td class="td1">100000</td>
          </tr>
          <tr>
            <td class="td1">1200</td>
            <td class="td1">200000</td>
          </tr>
        </table>
      </div>
    </div>

    <div class="three">
      <p class="p">如何提升信誉值？</p>
      <span class="span"
        >保持良好活跃的通话频次与时长、积极使用在线预约发布功能、心动双方保持良好印象，每次都可获得信誉值的提升哦。</span
      >

      <div class="tableBox">
        <table class="table_default1">
          <tr v-for="(tr, index) in promote" :key="index">
            <td class="td">
              {{ tr.name }}
            </td>
            <td class="td1">
              {{ tr.num }}
            </td>
            <td class="td1">
              {{ tr.gemstone }}
            </td>
          </tr>

          <!-- <tr v-for="(tr, index) in listOne" :key="index">
            <td rowSpan="6">
              <span>{{ tr.name }}</span>
            </td>
            <td>{{ tr.num }}</td>
            <td>{{ tr.gemstone }}</td>
          </tr> -->
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableTh: {
        //表头的描述信息
        c1: {
          title: "信誉值", //还可以增加其他描述，比如width等
          align: "left",
        },
        c2: {
          title: "提现金额(元)",
          align: "center",
        },
        c3: {
          title: "所需宝石(个)",
          align: "right",
        },
      },
      dataList: [
        {
          name: "<0",
          num: "不能提现",
          gemstone: "/",
        },
      ],
      //如何提升信誉值？
      promote: [
        {
          name: "通话",
          num: "接通每+30s",
          gemstone: "10",
        },
        // {
        //   name: "接通预约",
        //   num: "每接通一次",
        //   gemstone: "5",
        // },
        // {
        //   name: "取消预约",
        //   num: "取消一次",
        //   gemstone: "-20",
        // },
        // {
        //   name: "错过预约",
        //   num: "错过一次",
        //   gemstone: "-10",
        // },
        {
          name: "收到评价<3星",
          num: "收到一次",
          gemstone: "-5",
        },
        {
          name: "收到3、4星评价",
          num: "收到一次",
          gemstone: "10",
        },
        {
          name: "收到5星评价",
          num: "收到一次",
          gemstone: "20",
        },
      ],
    };
  },
  methods: {
    merage() {
      console.log(docuemnt.getElementsByClassName("table_default1"));

      let table = docuemnt.getElementsByClassName("table_default1");
      let lenTr = table.children("tr").size();
      let lenTd = table.children("tr").eq(0).children("td").size();
      let sum = 1;
      let rowIndex = -1;
      // 列循环
      for (let c = 0; c < lenTd; c++) {
        // 行循环
        for (let r = 0; r < lenTr - 1; r++) {
          let td = table.children("tr").eq(r).children("td").eq(c);
          let tdNext = table
            .children("tr")
            .eq(r + 1)
            .children("td")
            .eq(c);
          // 判断内容相同时
          if (td.html() == tdNext.html()) {
            if (rowIndex == -1) {
              rowIndex = r;
            }
            tdNext.addClass("hide");
            sum++;
            // 内容不同时
          } else {
            rowIndex = -1;
            sum = 1;
          }
          table
            .children("tr")
            .eq(rowIndex)
            .children("td")
            .eq(c)
            .attr("rowspan", sum);
        }
        rowIndex = -1;
        sum = 1;
      }
    },
  },
  created() {
    this.merage();
  },
};
</script>

<style lang="less" scoped>
.reputationValue {
  width: 100%;
  background: linear-gradient(180deg, #8f41e9 0%, #3e98e6 100%);
  padding-top: 70px;
  padding-bottom: 50px;
  .one {
    width: 340px;
    height: 110px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    .p {
      position: absolute;
      top: 26%;
      left: 48%;
      margin-left: -50px;
      margin-top: -50px;
      width: 120px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #ffdc2c;
      border-radius: 40px;
      color: #4c38b5;
      font-size: 13px;
      font-weight: bold;
    }
    .span {
      display: inline-block;
      padding: 30px 20px;
      color: #333333;
      font-size: 15px;
    }
  }

  .two {
    width: 340px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
    padding-bottom: 30px;
    .p {
      position: absolute;
      top: 4%;
      left: 48%;
      margin-left: -50px;
      margin-top: -50px;
      width: 120px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #ffdc2c;
      border-radius: 40px;
      color: #4c38b5;
      font-size: 13px;
      font-weight: bold;
    }
    .span {
      display: inline-block;
      padding: 30px 20px;
      color: #333333;
      font-size: 14px;
    }
    .tableBox {
      padding: 0px 20px;
      .table_default1 {
        width: 100%;
        height: 100%;
        border: 1px solid #cccccc;
        font-size: 12px;
        th {
          border: 1px solid #cccccc;
          height: 40px;
          line-height: 40px;
          color: #6950e7;
        }
        tr {
          border: 1px solid #cccccc;
        }
        td {
          text-align: center;
          border-right: 1px solid #cccccc;
          height: 100%;
        }
        .td1 {
          line-height: 40px;
        }
        .td {
          line-height: 40px;
        }
        .tdCenter {
          position: relative;
          span {
            position: absolute;
            left: 100%;
            top: 46%;
            margin-left: -50px;
          }
        }
        .tdCenterB {
          position: relative;
          span {
            position: absolute;
            left: 80%;
            top: 76%;
            margin-left: -50px;
            margin-top: -50px;
          }
        }
        .tdCenterC {
          position: relative;
          span {
            position: absolute;
            left: 24%;
            top: 84%;
            margin-top: -50px;
          }
        }
      }
    }
  }

  .three {
    width: 340px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
    padding-bottom: 30px;
    .p {
      position: absolute;
      top: 7%;
      left: 48%;
      margin-left: -50px;
      margin-top: -50px;
      width: 120px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #ffdc2c;
      border-radius: 40px;
      color: #4c38b5;
      font-size: 13px;
      font-weight: bold;
    }
    .span {
      display: inline-block;
      padding: 30px 20px;
      color: #333333;
      font-size: 15px;
    }
    .tableBox {
      padding: 0px 20px;
      .table_default1 {
        width: 100%;
        height: 100%;
        border: 1px solid #cccccc;
        font-size: 12px;
        th {
          border: 1px solid #cccccc;
          height: 40px;
          line-height: 40px;
        }
        tr {
          border: 1px solid #cccccc;
        }
        td {
          text-align: center;
          border-right: 1px solid #cccccc;
          height: 100%;
        }
        .td {
          display: flex;
          justify-content: center;
          align-items: baseline;
          width: 100%;
          line-height: 40px;
        }
        .td1 {
          width: 34%;
        }
      }
    }
  }
}
</style>